import {
  computed,
  defineComponent,
  onMounted,
  PropType,
  reactive,
  ref,
  watch,
} from "vue";

import * as echarts from "echarts";

import IpCard from "./IpCard";
import IpInfo from "./IpInfo";
import axios from "axios";
import { ElMessage } from "element-plus";

const IpChart = defineComponent({
  name: "IpChart",
  props: {
    data: {
      type: Array as PropType<TIpCard[]>,
      required: true,
    },
  },

  setup(props, { attrs }) {
    const ipDatas = computed(() => props.data);

    const isShowIpInfo = ref(false);

    const data = reactive({
      ip: {
        id: "",
        ip: "",
        name: "",
        mac: "",
        location: "",
        ttl: 0,
        domain: "",
        cpe: "",
        enable: false,
        status: false,
        roundtripTime: 0,
        url: "",
        httpEnable:false,
        httpUrl:"",
      },
    });

    const modifyIp = (d: TIpCard) => {
      isShowIpInfo.value = true;
      data.ip = d;
      document.documentElement.scrollTop = 0;
      (document.getElementById("my_modal_1") as any).showModal();
    };

    const abortModify = () => {
      isShowIpInfo.value = false;
    };

    const submitModify = async () => {
      const url = `${data.ip.url}/${data.ip.id}`;

      const data2 = {
        ip: data.ip.ip,
        name: data.ip.name,
        domain: data.ip.domain,
        mac: data.ip.mac,
        location: data.ip.location,
        cpe: data.ip.cpe,
        enable: data.ip.enable,
        httpEnable:data.ip.httpEnable,
        httpUrl:data.ip.httpUrl
      };

      const config = {
        headers: {
          "Content-Type": "application/json",
        },
      };

      axios
        .put(url, data2, config)
        .then((response) => {
          if (response.status === 204) {
            ElMessage({
              showClose: true,
              message: "更新成功",
              type: "success",
            });
            isShowIpInfo.value = false;
          } else {
            ElMessage({
              showClose: true,
              message: "更新失败",
              type: "error",
            });
          }
        })
        .catch((error) => {
          ElMessage({
            showClose: true,
            message: "更新失败",
            type: "error",
          });
        });
    };

    return () => (
      <>
        {isShowIpInfo.value ? (

          <div class="p-48  px-96 absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-blue-300 bg-opacity-70 z-20 rounded-lg ">

            <div class="w-72 h-76 bg-white rounded-lg m-2 flex flex-col px-2 text-black">

              <div class="my-2">IP信息修改</div>
              <div>
                <label class="input input-bordered flex items-center gap-2 input-sm">
                  <span>IP地址:</span>
                  <input
                    type="text"
                    class="grow"
                    placeholder="Ip地址"
                    v-model={data.ip.ip}
                  />
                </label>

                <label class="input input-bordered flex items-center gap-2 input-sm">
                  <span> 名称 : </span>
                  <input
                    type="text"
                    class="grow"
                    placeholder="Name"
                    v-model={data.ip.name}
                  />
                </label>

                <label class="input input-bordered flex items-center gap-2 input-sm">
                  <span> CPE : </span>
                  <input
                    type="text"
                    class="grow"
                    placeholder="Cpe"
                    v-model={data.ip.cpe}
                  />
                </label>

                <label class="input input-bordered flex items-center gap-2 input-sm">
                  <span>地址 : </span>
                  <input
                    type="text"
                    class="grow"
                    placeholder="地址"
                    v-model={data.ip.location}
                  />
                </label>

                <label class="input input-bordered flex items-center gap-2 input-sm">
                  <span>网域 : </span>
                  <input
                    type="text"
                    class="grow"
                    placeholder="5G or LAN"
                    v-model={data.ip.domain}
                  />
                </label>

                <label class="input input-bordered flex items-center gap-2 input-sm">
                  <span>MAC : </span>
                  <input
                    type="text"
                    class="grow"
                    placeholder="MAC"
                    v-model={data.ip.mac}
                  />
                </label>


                <label class="input input-bordered flex items-center gap-2 input-sm ">
                  <span>启用 : </span>
                  <input
                    type="checkbox"
                    class="checkbox checkbox-sm"
                    v-model={data.ip.enable}
                  />
                </label>

                <label class="input input-bordered flex items-center gap-2 input-sm ">
                  <span>HttpEnable : </span>
                  <input
                    type="checkbox"
                    class="checkbox checkbox-sm"
                    v-model={data.ip.httpEnable}
                  />
                </label>

                <label class="input input-bordered flex items-center gap-2 input-sm">
                  <span>HttpUrl : </span>
                  <input
                    type="text"
                    class="grow"
                    placeholder="Http Url"
                    v-model={data.ip.httpUrl}
                  />
                </label>


              </div>
              <div class="flex flex-row justify-around my-2">
                <button
                  class="btn btn-outline btn-info btn-sm"
                  onClick={() => submitModify()}
                >
                  提交
                </button>

                <button
                  class="btn btn-outline btn-info btn-sm"
                  onClick={() => abortModify()}
                >
                  放弃
                </button>
              </div>
            </div>

          </div>
        ) : (
          <div></div>
        )}

        <div class="flex flex-wrap justify-between">
          {ipDatas.value.map((ipData) => (
            <IpCard
              key={ipData.id}
              data={ipData}
              onModify={(data: TIpCard) => modifyIp(data)}
            />
          ))}
        </div>
      </>
    );
  },
});

export default IpChart;
